<template>
  <div id="app">
    <title-top></title-top>
    <div class="box">
      <div class="left">
        <content-left-top :leftTop="leftTop"></content-left-top>
        <content-left-bottom :leftBottom="leftBottom"></content-left-bottom>
      </div>
      <div class="center">
        <content-cent></content-cent>
      </div>
      <div class="right">
        <content-right-top></content-right-top>
        <content-right-bottom :rightBottom="rightBottom"></content-right-bottom>
      </div>
    </div>
  </div>
</template>

<script>
import TitleTop from "./components/TitleTop.vue";
import ContentCent from "./components/ContentCent.vue";
import ContentLeftTop from "./components/ContentLeftTop.vue";
import ContentLeftBottom from "./components/ContentLeftBottom.vue";
import ContentRightTop from "./components/ContentRightTop.vue";
import ContentRightBottom from "./components/ContentRightBottom.vue";

//导入请求数据接口
import { getLeftData, getRightData } from "@/api/index";
//导入本地数据
import {localData} from '@/api/localData'

export default {
  name: "App",
  created() {
    getLeftData()
      .then((res) => {
        this.leftTop.total = String(res.total);
        this.leftTop.subpie = res.subpie;
        this.leftBottom.plate = res.plate;
      })
      .catch((err) => {
        console.log('=======',err);
        alert('接口请求数据出错！以下为默认数据')
        this.leftTop.total = String(localData.leftData.total);
        this.leftTop.subpie = localData.leftData.subpie;
        this.leftBottom.plate = localData.leftData.plate;
      });

    getRightData()
      .then((item) => {
        this.rightBottom.topText = {
          allNum: item.allNum,
          onlineNum: item.onlineNum,
          notOnlineNum: item.notOnlineNum,
          faultNum: item.faultNum,
        };
        this.rightBottom.dayText = {
          totalMileageDay: item.totalMileageDay,
          totalTimeDay: item.totalTimeDay,
          avgMileageDay: item.avgMileageDay,
          avgTimeDay: item.avgTimeDay,
        };
        this.rightBottom.carList = item.carList;
      })
      .catch((err) => {
        console.log(err);
        this.rightBottom.topText = {
          allNum: localData.rightData.allNum,
          onlineNum: localData.rightData.onlineNum,
          notOnlineNum: localData.rightData.notOnlineNum,
          faultNum: localData.rightData.faultNum,
        };
        this.rightBottom.dayText = {
          totalMileageDay: localData.rightData.totalMileageDay,
          totalTimeDay: localData.rightData.totalTimeDay,
          avgMileageDay: localData.rightData.avgMileageDay,
          avgTimeDay: localData.rightData.avgTimeDay,
        };
        this.rightBottom.carList = localData.rightData.carList;
      });
  },
  data() {
    return {
      leftTop: {
        total: "",
        subpie: [],
      },
      leftBottom: {
        plate: [],
      },
      rightBottom: {
        topText: {},
        dayText: {},
        carList: [],
      },
    };
  },
  components: {
    TitleTop,
    ContentLeftTop,
    ContentRightTop,
    ContentCent,
    ContentLeftBottom,
    ContentRightBottom,
  },
};
</script>

<style>
body {
  background: url("./assets/imgs/pageBg.png") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
}
::-webkit-scrollbar {
  display: none;
}
ul,
ul li {
  list-style: none;
}
.box {
  display: flex;
}
.box .left {
  flex: 1;
}
.box .right {
  flex: 1;
}
.box .center {
  flex: 2;
}
/* .box > div > div {
  margin-top: 12px;
} */
</style>
